<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { $singleMsg } from "@plugins/utils/element";
import type Typings from "@/typings";

type DataType = {
  id: string;
  name: string;
  date: number | string;
  address: string;
  test: string;
};

const columns = computed<Typings.Plugin.Table.column<DataType>[]>(() => {
  return [
    {
      prop: "date",
      label: "日期",
      colType: "time",
      format: "YYYY-MM-DD HH:mm:ss",
    },

    {
      prop: "name",
      label: "名称",
      colType: "btn",
      clickFn: (scope) => {
        $singleMsg({
          message: scope.row.name,
        });
      },
    },

    {
      colType: "html",
      prop: "address",
      label: "地址",
      htmlFn: (scope) => {
        return `<span class="red">${scope.row.address}<span>`;
      },
    },

    { colType: "slot", prop: "test", label: "测试" },

    {
      colType: "operate",
      label: "操作",
      btns: [
        { name: "查看", type: "primary", handleType: "check" },
        { name: "编辑", type: "info", handleType: "edit" },
        {
          name: "删除",
          type: "danger",
          handleType: "delete",
          hideFn: (scope) => {
            return scope.row.name === "dog";
          },
        },
      ],
    },
  ];
});
const tableData = ref<DataType[]>([]);
const loading = ref(false);

const operateClick = (
  type: string,
  scope: { row: DataType; $index: number }
) => {
  $singleMsg({
    message: `${scope.row.name}-${scope.$index}-${type}`,
  });
};

const table = ref();
const getTable = () => {
  console.log(table.value.instance);
};

const selectable = (row: DataType) => {
  return row.id !== "2";
};

onMounted(() => {
  loading.value = true;
  setTimeout(() => {
    tableData.value = [
      {
        id: "1",
        date: "2025-04-20",
        name: "TomTomTomTomTomTomTomTomTomTomTomTomTomTomTom",
        address: "No. 189, Grove St, Los Angeles",
        test: "xxxxxxxxxxxxxxxxxxxxx",
      },
      {
        id: "2",
        date: Date.now(),
        name: "jerry",
        address: "No. 189, Grove St, Los Angeles",
        test: "xxxxxxxxxxxxxxxxxxxxx",
      },
      {
        id: "3",
        date: Date.now(),
        name: "dog",
        address: "No. 189, Grove St, Los Angeles",
        test: "xxxxxxxxxxxxxxxxxxxxx",
      },
      {
        id: "4",
        date: Date.now(),
        name: "uncle",
        address: "No. 189, Grove St, Los Angeles",
        test: "xxxxxxxxxxxxxxxxxxxxx",
      },
    ];
    loading.value = false;
  }, 1000);
});
</script>

<template>
  <div class="page-container w-full h-full">
    <xt-row>
      <xt-col :span="24">
        <xt-card class="card-container" header="基础">
          <xt-button @click="getTable">获取 table</xt-button>
          <xt-table
            ref="table"
            v-loading="loading"
            showSelection
            :data="tableData"
            :columns="columns"
            :selectable="selectable"
            @operateClick="operateClick"
          >
            <template #test="scope">
              <span class="red">{{ scope.row.test }}</span>
            </template>
            <!-- <xt-table-column prop="date" label="日期"></xt-table-column>
            <xt-table-column prop="name" label="名称"></xt-table-column>
            <xt-table-column prop="address" label="地址"></xt-table-column> -->
          </xt-table>
        </xt-card>
      </xt-col>
    </xt-row>
  </div>
</template>

<style lang="scss">
.page-container {
  .card-container {
    @apply m-[10px];
  }

  .red {
    color: red;
  }
}
</style>
